﻿@{
    Layout = null;
}

@using System.Text;
@using System.Configuration;

            @{
                Layout = null;
                ViewBag.Title = "播放";
                string mHost = ConfigurationManager.AppSettings["MusicHost"].Trim();
                }
<!DOCTYPE html>

<html>
<head>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">    
  <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
  <META HTTP-EQUIV="Expires" CONTENT="0">
    <title>音乐盒</title>
    <link href="@Url.Content("~/JPlayer/skin/jplayer.blue.monday.css")" rel="stylesheet" />
<style type="text/css">
 fieldset
{
    border: 1px solid #ddd;
    
    padding: 0 0 1.4em 1.4em;
    
    margin: 0 0 1.5em 0;
    border-radius:10px;
    -webkit-border-radius:10px;    
}

legend
{
    font-size: 1.2em;
    font-weight: bold;
}
    .div_PlayListItem {
        clear:both;
        height:16px;
       
    }
    .divPlay {
        float:left;
        width:17px;
        height:16px;
    }
    .divPlaying {
        width:17px;
        height:16px;
        background-image:url(@Url.Content("~/imgResource/playing.gif"));        
    }

    .hoverbackcolor
{
    background-color:#EAEAEA;
}

.evenbackcolor {
    background-color:#F8F8F8;
    border-radius:5px;
}
.delete_icon {
    float:left;
    height:13px;
    width:13px;
    background-image:url(../imgResource/UNVwoEw9.png);
    background-position: -371px -239px;   
}
</style>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>          
            <script src="@Url.Content("~/JPlayer/js/jquery.jplayer.min.js")"></script>
             <script src="@Url.Content("~/Scripts/Common/jsPlayListStorage.js")"></script>
            <script src="@Url.Content("~/Scripts/Common/jPlayerPlayList.js")"></script>           
           
            <script type="text/javascript">

                var dbPlaylist = null;

                $(document).ready(function () {
                    var mhost = $("#hdMHost").val();
                    SC();
                    localStorage.isOpen = "true";
                    var audioPlaylist = new Playlist(mhost, {
                        ready: function () {
                            audioPlaylist.playlistInit(true); // Parameter is a boolean for autoplay.
                        },
                        ended: function () {
                            audioPlaylist.playlistNext();
                        },
                        play: function () {
                            $(this).jPlayer("pauseOthers");
                        },
                        swfPath: "/JPlayer/js",
                        supplied: "m4a",

                        cssSelectorAncestor: "#jp_interface_2"
                    });

                    $(".jp-playlist ul li").live({
                        mouseenter: function () {
                            $(this).removeClass("evenbackcolor");
                            $(this).addClass("hoverbackcolor");
                        },
                        mouseleave: function () {
                            $(this).removeClass("hoverbackcolor");
                            $(".divsongInfo:even").addClass("evenbackcolor");
                        }
                    });
                    function SC() {
                        jsPlayListStorage.getPlayingList("li_playlist_2");
                        jsPlayListStorage.getPlayList("aaaa");
                    }
                    window.onstorage = function (e) {
                        if (e.key == "playList") {
                            jsPlayListStorage.getPlayList("aaaa");
                        }
                        if (e.key == "playingList") {
                            jsPlayListStorage.getPlayingList("li_playlist_2");
                            audioPlaylist.playlistChange(0);
                        }
                    }
                    window.onbeforeunload = function () {
                        localStorage.isOpen = "false";
                    }

                    $(".jp-clear").click(function () {
                        localStorage.playList = "";
                        localStorage.playingList = "";
                        $("#aaaa").html('<li id="li_playlist_2" style="padding:0px;"></li>');
                        audioPlaylist.playlistChange(0);
                    });
                })              
            </script>
</head>
<body>
    <div style="margin:0 auto;">
    <input  type="hidden" id="hdMHost" value="@mHost" />           
        <div style="margin: 0 auto;">
            <div>
        <div id="jquery_jplayer_2" class="jp-jplayer"></div>

		<div class="jp-audio">
            <div class="jp-type-playlist">
              
            </div>
			<div class="jp-type-single">
				<div id="jp_interface_2" class="jp-interface">
					<ul class="jp-controls">                       
						<li><a href="#" class="jp-play" tabindex="1">play</a></li>
						<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>                        				
						<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
						<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                        <li><a href="#" class="jp-previous" tabindex="1"></a></li>
                        <li><a href="#" class="jp-next" tabindex="1"></a></li>
					</ul>
					<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>
                    <div class="jp-clear" title="清除播放列表">Clear</div>
					<div class="jp-current-time"></div>
					<div class="jp-duration"></div>
                    <div style="clear:both;"></div>
                     
				</div>               
				<div id="jp_playlist_2" class="jp-playlist">
					<ul id="aaaa">
                        <li id="li_playlist_2" style="padding:0px;"></li>	                      
					</ul>
				</div>
			</div>
		</div>              
            </div>
            
        </div>
   
</div>
</body>
</html>
